<template>
  <div>
    <el-form :inline="true" :model="form">
      <el-form-item label="订单编号">
        <el-input size="mini" placeholder="请输入订单编号" v-model="form.orderNo" />
      </el-form-item>
      <el-form-item label="三方订单号">
        <el-input size="mini" placeholder="请输入三方订单号" v-model="form.outOrderNo" />
      </el-form-item>
      <el-form-item label="商家名称" v-if="agencyInfo.viewSeller">
        <el-input size="mini" placeholder="请输入商家名称" v-model="form.sellerName" />
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input size="mini" placeholder="请输入商品名称" v-model="form.goodsName" />
      </el-form-item>
      <el-form-item label="收件人">
        <el-input size="mini" placeholder="请输入收件人" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="收件电话">
        <el-input size="mini" placeholder="请输入收件人电话" v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="快递单号">
        <el-input size="mini" placeholder="请输入快递单号" v-model="form.logisticsKdh" />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select size="mini" v-model="form.orderStatus" placeholder="订单状态" clearable>
          <el-option label="全部" value="0"></el-option>
          <el-option label="待支付" value="7"></el-option>
          <el-option label="待发货" value="1"></el-option>
          <el-option label="待收货" value="2"></el-option>
          <el-option label="已完成" value="3"></el-option>
          <el-option label="已关闭" value="4"></el-option>
          <el-option label="维权订单" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算状态">
        <el-select size="mini" v-model="form.profitStatus" placeholder="结算状态" clearable>
          <el-option label="全部" value="0"></el-option>
          <el-option label="未结算" value="1"></el-option>
          <el-option label="已结算" value="2"></el-option>
          <el-option label="已失效" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单日期">
        <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini" v-model="tkCreatedAt" type="daterange"
          align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="维权状态">
                <el-select size="mini" v-model="form.feedbackStatus" placeholder="维权状态" clearable>
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="维权中" value="1"></el-option>
                    <el-option label="已处理" value="2"></el-option>
                    <el-option label="维权完成" value="3"></el-option>
                </el-select>
            </el-form-item> -->
      <el-form-item>
        <el-button size="mini" type="primary" @click="handleFilter">查询</el-button>
        <el-button v-if="!is1688" size="mini" type="primary" @click="handleBatchSend">批量发货</el-button>
        <el-button v-if="is1688" size="mini" type="primary" @click="handleSync">同步1688订单</el-button>
        <el-button v-if="isJd" size="mini" type="primary" @click="handleSync">同步京东订单</el-button>
        <el-button class="ml10" size="mini" @click="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="dataTable" :height="tableHeight" :data="list" @sort-change="tblSort" style="width: 100%">
      <el-table-column align="left" label="商品信息" width="500">
        <template slot-scope="scope">
          <div class="cell">
            <template v-for="(item, idx) in scope.row.products">
              <div class="order-img-box" :key="item.id">
                <div class="left">
                  <div v-if="idx == 0" class="order-no">订单编号：{{ scope.row.orderNo }}</div>

                  <div class="title-img">
                    <div class="img-text-box">
                      <img :src="item.imgUrl" class="el-tooltip img item">
                      <div>
                        <div class="img-text ellipsis2 f-14">{{ item.title }}</div>
                        <span class="btn-text" v-if="item.attribute">{{ item.attribute }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right" style="font-size:12px;">共{{ item.quantity }}件</div>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="三方订单号" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.outOrderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="商家名称" width="150" v-if="agencyInfo.viewSeller">
        <template slot-scope="scope">
          <span>{{ scope.row.sellerName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="订单状态" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.orderStatusText }}</span>
          <p v-if="scope.row.canPay == 1">
            <el-button type="text" @click="handlePay(scope.row)">付款</el-button>
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="买家/收货人" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.addressName }}</span>
          <p>{{ scope.row.addressMobile }}</p>
        </template>
      </el-table-column>
      <el-table-column width="100" align="right" label="结算金额" sortable="custom" prop="agency_amount">
        <template slot-scope="scope">
          <span>￥{{ scope.row.agencyAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="下单时间" width="150" sortable="custom" prop="created_at">
        <template slot-scope="scope">
          <span>{{ scope.row.createdAt }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="结算状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="getStatusColor(scope.row)">{{ scope.row.settleStatusText }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          <el-button v-if="scope.row.canSend == 1" type="text" @click="handleSend(scope.row)">发货</el-button>
          <el-button v-if="scope.row.canCancel == 1" type="text" @click="handleCancel(scope.row)">取消</el-button>
          <el-button v-if="scope.row.canJdOrder == 1" type="text" @click="handleEditAddress(scope.row)">编辑地址</el-button>
          <el-button v-if="scope.row.canJdOrder == 1" type="text" @click="handleJdOrder(scope.row)">京东下单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="form.pageNum" :page-sizes="[20, 30, 50]" :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>

    <el-dialog title="发货" :visible.sync="dialogSendVisible" :close-on-click-modal="false" width="800px">
      <order-send :formData.sync="sendForm" @cancelCreate="cancel" @okCreate="ok" />
    </el-dialog>

    <el-dialog title="批量发货" :visible.sync="dialogBatchSendVisible" :close-on-click-modal="false" width="800px">
      <order-batch-send @okCreate="okBatch" />
    </el-dialog>

    <el-dialog title="同步订单" :visible.sync="dialogSyncVisible" :close-on-click-modal="false" width="700px">
      <el-form :rules="rules" :model="orderForm" ref="orderForm" label-width="120px">
        <el-form-item label="同步时间段">
          <el-date-picker size="mini" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
            v-model="orderDate" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogSyncVisible = false">取消</el-button>
        <el-button :loading="orderLoading" size="mini" type="primary" @click="doSync()">同步</el-button>
      </div>
    </el-dialog>

    <el-dialog title="同步订单" :visible.sync="dialogJdSyncVisible" :close-on-click-modal="false" width="700px">
      <el-form :rules="rules" :model="orderForm" ref="orderForm" label-width="120px">
        <el-form-item label="同步时间段">
          <el-date-picker size="mini" value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="orderJdDate"
            type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogJdSyncVisible = false">取消</el-button>
        <el-button :loading="orderLoading" size="mini" type="primary" @click="doJdSync()">同步</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑收货地址" :visible.sync="dialogEditAddressVisible" :close-on-click-modal="false" width="700px">
      <el-form :rules="editAddressRules" :model="editAddressForm" ref="editAddressForm" label-width="120px">
        <el-form-item label="所在省：" prop="provinceId">
          <el-select ref="provinceSel" size="mini" v-model="editAddressForm.provinceId" placeholder="请选择"
            @change="handleProvince">
            <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在市：" prop="cityId">
          <el-select ref="citySel" size="mini" v-model="editAddressForm.cityId" placeholder="请选择" @change="handleCity">
            <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在县：" prop="countyId">
          <el-select ref="countySel" size="mini" v-model="editAddressForm.countyId" placeholder="请选择"
            @change="handleCounty">
            <el-option v-for="item in countyList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在街道：" prop="townId">
          <el-select ref="townSel" size="mini" v-model="editAddressForm.townId" placeholder="请选择" @change="handleTown">
            <el-option v-for="item in townList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址：" prop="address">
          <el-input size="mini" v-model="editAddressForm.address" placeholder="请输入详细地址" />
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogEditAddressVisible = false">取消</el-button>
        <el-button :loading="editAddressLoading" size="mini" type="primary" @click="doEditAddress()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  order_list,
  order_cancel,
  order_pay,
  order_export,
  order_sync
} from '../../api/order';
import {
  jd_province,
  jd_city,
  jd_county,
  jd_town,
  jd_edit_address,
  jd_create_order
} from '../../api/jd';
import {
  agency_info
} from '../../api/agency';
import {
  agency_is1688,
  agency_isJd
} from '../../api/agency';

export default {
  name: 'order-list',
  components: {
    'order-send': () => import('../../components/Order/send'),
    'order-batch-send': () => import('../../components/Order/batch_send'),
  },
  props: {
    formData: Object
  },
  computed: {
  },
  watch: {
    formData: {
      immediate: true,
      handler(val) {
        this.form.orderStatus = val.order_status;

        this.getData();
      }
    }
  },
  data() {
    return {
      dialogJdSyncVisible: false,
      orderJdDate: undefined,
      provinceList: [],
      cityList: [],
      countyList: [],
      townList: [],
      editAddressLoading: false,
      dialogEditAddressVisible: false,
      editAddressForm: {
        provinceId: undefined,
        province: undefined,
        cityId: undefined,
        city: undefined,
        countyId: undefined,
        county: undefined,
        townId: undefined,
        town: undefined,
        address: undefined,
        id: undefined,
      },
      editAddressRules: {
        provinceId: [
          {
            required: true,
            message: '请选择省',
            trigger: 'blur'
          }
        ],
        cityId: [
          {
            required: true,
            message: '请选择市',
            trigger: 'blur'
          }
        ],
        countyId: [
          {
            required: true,
            message: '请选择县',
            trigger: 'blur'
          }
        ],
        address: [
          {
            required: true,
            message: '请填写详细地址',
            trigger: 'blur'
          }
        ],
      },
      tkCreatedAt: undefined,
      orderForm: {
        startDate: undefined,
        endDate: undefined,
      },
      orderLoading: false,
      rules: {
      },
      orderDate: undefined,
      dialogSyncVisible: false,
      is1688: false,
      isJd: false,
      dialogBatchSendVisible: false,
      agencyInfo: {
        viewSeller: 0,
        id: 0,
      },
      dialogSendVisible: false,
      sendForm: {
        order_id: "0"
      },
      tableHeight: 200,
      form: {
        orderStatus: "0",
        orderNo: undefined,
        name: undefined,
        mobile: undefined,
        startDate: undefined,
        endDate: undefined,
        profitStatus: "0",
        feedbackStatus: undefined,
        pageNum: 1,
        pageSize: 20,
        orderCol: undefined,
        orderAsc: undefined,
        feedbackStatus: "0",
        outOrderNo: undefined,
        logisticsKdh: undefined,
      },
      list: [],
      total: 0,
    }
  },
  created() {
    this._getTableHeight();
    // agency_is1688().then((res)=>{
    //     this.is1688 = res.data == "1";

    //     if(!this.is1688) {
    //         agency_isJd().then((res)=>{
    //             this.isJd = res.data == "1";
    //         }).catch((err)=>{

    //         })
    //     }
    // }).catch((err)=>{

    // })
  },
  mounted() {
    const that = this

    window.onresize = () => {

      return (() => {

        that._getTableHeight()

      })()
    }
  },
  methods: {
    handleProvince(v) {
      this.provinceList.forEach((item) => {
        if (item.id == this.editAddressForm.provinceId) {
          this.editAddressForm.province = item.name;
        }
      })
      this.editAddressForm.cityId = undefined;
      this.editAddressForm.city = undefined;
      this.editAddressForm.countyId = undefined;
      this.editAddressForm.county = undefined;
      this.editAddressForm.townId = undefined;
      this.editAddressForm.town = undefined;

      console.log(this.editAddressForm)

      jd_city(this.editAddressForm.provinceId).then((res) => {
        this.cityList = res.data;
      }).catch((err) => {

      })
    },
    handleCity(v) {
      this.cityList.forEach((item) => {
        if (item.id == this.editAddressForm.cityId) {
          this.editAddressForm.city = item.name;
        }
      })
      this.editAddressForm.countyId = undefined;
      this.editAddressForm.county = undefined;
      this.editAddressForm.townId = undefined;
      this.editAddressForm.town = undefined;

      jd_county(this.editAddressForm.cityId).then((res) => {
        this.countyList = res.data;
      }).catch((err) => {

      })
    },
    handleCounty(v) {
      this.countyList.forEach((item) => {
        if (item.id == this.editAddressForm.countyId) {
          this.editAddressForm.county = item.name;
        }
      })
      this.editAddressForm.townId = undefined;
      this.editAddressForm.town = undefined;

      jd_town(this.editAddressForm.countyId).then((res) => {
        this.townList = res.data;
      }).catch((err) => {

      })
    },
    handleTown(v) {
      this.townList.forEach((item) => {
        if (item.id == this.editAddressForm.townId) {
          this.editAddressForm.town = item.name;
        }
      })
    },
    doEditAddress() {
      this.$refs["editAddressForm"].validate(valid => {
        if (valid) {
          this.$confirm('确定编辑收货地址?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.editAddressLoading = true;
              jd_edit_address(this.editAddressForm).then((res) => {
                this.editAddressLoading = false;
                this.dialogEditAddressVisible = false;
                this.$message.success("收货地址已编辑");
                this.getList();
              }).catch((err) => {
                this.editAddressLoading = false;
                this.dialogEditAddressVisible = false;
              })

            }).catch(() => { });
        }
      });


    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
      };
      return fmt;
    },
    dateFormat2(now) {
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth();//得到月份
      var date = now.getDate();//得到日期
      var hour = now.getHours();//得到小时
      var minu = now.getMinutes();//得到分钟
      var sec = now.getSeconds();//得到秒

      month = month + 1;
      if (month < 10) month = "0" + month;
      if (date < 10) date = "0" + date;
      if (hour < 10) hour = "0" + hour;
      if (minu < 10) minu = "0" + minu;
      if (sec < 10) sec = "0" + sec;

      return year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
    },
    handleSync() {
      if (this.is1688) {
        let day1 = new Date();
        let endDate = this.dateFormat("YYYY-mm-dd HH:MM:SS", day1);
        let day2 = new Date(day1.getTime() - 30 * 60 * 1000);

        // console.log(day2 + "-" + day1)
        let startDate = this.dateFormat("YYYY-mm-dd HH:MM:SS", day2);
        console.log(startDate + "-" + endDate);

        this.orderDate = [startDate, endDate];

        this.dialogSyncVisible = true;
      } else if (this.isJd) {
        let day1 = new Date();
        let endDate = this.dateFormat("YYYY-mm-dd", day1);
        let day2 = new Date(day1.getTime() - 30 * 60 * 1000);

        // console.log(day2 + "-" + day1)
        let startDate = this.dateFormat("YYYY-mm-dd", day2);
        console.log(startDate + "-" + endDate);

        this.orderJdDate = [startDate, endDate];

        this.dialogJdSyncVisible = true;
      }
    },
    doSync() {
      this.$confirm('确定同步1688订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.orderLoading = true;
          if (this.orderDate) {
            this.orderForm.startDate = this.orderDate[0];
            this.orderForm.endDate = this.orderDate[1];
          } else {
            this.orderForm.startDate = undefined;
            this.orderForm.endDate = undefined;
          }
          order_sync(this.orderForm).then((res) => {
            this.orderLoading = false;
            this.dialogSyncVisible = false;
            this.$message.success("订单已同步");
            this.getList();
          }).catch((err) => {
            this.orderLoading = false;
            this.dialogSyncVisible = false;
          })

        }).catch(() => { });

    },
    doJdSync() {
      this.$confirm('确定同步京东订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.orderLoading = true;
          if (this.orderJdDate) {
            this.orderForm.startDate = this.orderJdDate[0];
            this.orderForm.endDate = this.orderJdDate[1];
          } else {
            this.orderForm.startDate = undefined;
            this.orderForm.endDate = undefined;
          }
          order_sync(this.orderForm).then((res) => {
            this.orderLoading = false;
            this.dialogSyncVisible = false;
            this.$message.success("订单已同步");
            this.getList();
          }).catch((err) => {
            this.orderLoading = false;
            this.dialogSyncVisible = false;
          })

        }).catch(() => { });

    },
    getData() {
      if (this.agencyInfo.id > 0) {
        this.getList();
      } else {
        agency_info().then((res) => {
          this.agencyInfo = res.data;
          this.getList();
        }).catch((err) => {

        })
      }
    },
    createCellPos(n) {
      var ordA = 'A'.charCodeAt(0);

      var ordZ = 'Z'.charCodeAt(0);

      var len = ordZ - ordA + 1;

      var s = "";



      while (n >= 0) {

        s = String.fromCharCode(n % len + ordA) + s;

        n = Math.floor(n / len) - 1;

      }

      return s;

    },
    exportExcel() {
      order_export(this.form).then((res) => {
        if (res.data.items && res.data.items.length > 0) {
          let items = res.data.items;

          let export_config = res.data.exportConfig;
          items.unshift(export_config.header)

          var column = null;
          eval("column = " + export_config.columnJs);
          console.log(column)
          let export_data = LAY_EXCEL.filterExportData(items, column);
          let sheet_data = new Object();
          eval("sheet_data." + res.data.sheet + "=export_data;");
          let cellPos = this.createCellPos(parseInt(export_config.columnCount) - 1);

          LAY_EXCEL.setExportCellStyle(export_data, "A1:" + cellPos + "1", {
            s: {
              fill: { fgColor: { rgb: "FFFF00" } },
              alignment: {
                horizontal: 'center',
                vertical: 'center'
              },
              font: {
                sz: 12,
                bold: true
              }
            }
          });

          LAY_EXCEL.exportExcel(sheet_data, res.data.fileName, 'xlsx', {
            extend: {
              '!merges': export_config.mergeCells,
              '!cols': export_config.width,
              '!rows': LAY_EXCEL.makeRowConfig({
                1: 40
              })
            }
          });
        } else {
          this.$message.error("导出数据为空");
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    _getTableHeight() {
      this.tableHeight = window.innerHeight - 280
    },
    tblSort(d) {
      this.form.orderCol = d.prop;
      this.form.orderAsc = d.order;

      this.handleFilter();
    },
    handleFilter() {
      this.form.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList();
    },
    getList() {
      if (this.tkCreatedAt) {
        this.form.startDate = this.tkCreatedAt[0];
        this.form.endDate = this.tkCreatedAt[1];
      } else {
        this.form.startDate = undefined;
        this.form.endDate = undefined;
      }
      order_list(this.form).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
      })
    },
    getStatusColor(row) {
      if (row.profitStatus == 5) {
        return "success"
      }

      return "danger"
    },
    handleDetail(row) {
      let { href } = this.$router.resolve({ path: '/order_detail?id=' + row.id });
      window.open(href, '_blank');

    },
    handleCreate() {
      this.$router.push("/order_create")
    },
    handleSend(row) {
      this.sendForm = {
        order_id: row.id
      };

      this.dialogSendVisible = true;
    },
    handleEditAddress(row) {
      jd_province().then((res) => {
        this.provinceList = res.data;

        this.editAddressForm = {
          provinceId: undefined,
          province: undefined,
          cityId: undefined,
          city: undefined,
          countyId: undefined,
          county: undefined,
          townId: undefined,
          town: undefined,
          address: undefined,
          id: row.id,
        };

        this.dialogEditAddressVisible = true;
      }).catch((err) => {

      })
    },
    handleJdOrder(row) {
      this.$confirm('确定京东下单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          jd_create_order(row.id).then((res) => {
            if (res.data > 0) {
              this.$message.success("京东已下单");
              this.getList();
            } else {
              this.$message.error("京东下单失败，请检查是否收货地址不合法");
            }
          }).catch((err) => {
          })

        }).catch(() => { });
    },
    handleCancel(row) {
      this.$confirm('确定取消订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          order_cancel(row.id)
            .then(() => {
              this.$message.success("订单取消成功");
              this.getList();
            });
        }).catch(() => { });
    },
    handlePay(row) {
      this.$confirm('确定付款?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          order_pay(row.id)
            .then(() => {
              this.$message.success("订单付款成功");
              this.getList();
            });
        }).catch(() => { });
    },
    cancel() {
      this.dialogSendVisible = false;
    },
    ok() {
      this.dialogSendVisible = false;
      this.$message.success("订单已发货");
      this.getList();

    },
    okBatch() {
      this.dialogBatchSendVisible = false;
      this.$message.success("订单已批量发货");
      this.getList();

    },
    handleBatchSend() {
      this.dialogBatchSendVisible = true;
    },

  }
}
</script>
<style lang="scss" scoped>
.cell {
  line-height: 1.5;
  padding: 0 2px;

  .order-img-box {
    margin-left: 10px;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    .order-no {
      margin-bottom: 10px;
      font-size: 14px;
    }

    .title-img {
      position: relative;
      border-radius: 4px;
      overflow-y: hidden;

      .img-text-box {
        margin-left: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        .img {
          width: 100px;
          height: 100px;
          border-radius: 4px;
          margin-right: 10px;
        }

        .img-text {
          width: 240px;
          height: 36px;
          line-height: 18px;
          margin-bottom: 10px;
        }

        .btn-text {
          width: auto;
          height: 18px;
          background: rgba(51, 51, 51, .1);
          font-size: 12px;
          padding: 2px 4px;
        }
      }
    }
  }
}
</style>
